<template>
  <el-row>
    <el-col :span="8" class="sea-card">
      <el-card shadow="hover">
        <el-button size="small" type="primary" style="width: 100%">Back To Inbox</el-button>
        <div class="text-box with-border">
          <strong><i class="fa fa-inbox"></i> Inbox：</strong>
          <span class="badge bg-orange pull-right">1</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-envelope-o"></i> Sent：</strong>
          <span class="badge bg-orange pull-right">4</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-file-text-o"></i> Drafts：</strong>
          <span class="badge bg-gray pull-right">32</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-filter"></i> Junk：</strong>
          <span class="badge bg-gray pull-right">1</span>
        </div>
        <div class="text-box with-border">
          <strong><i class="fa fa-trash-o"></i> Trash：</strong>
          <span class="badge bg-gray pull-right">2</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="16" class="sea-card">
      <el-card shadow="hover">
        <sea-table-title slot="header" title="Read Mail">
          <sea-small-pagination class="pull-right" total="100"></sea-small-pagination>
        </sea-table-title>
        <div class="box no-border">
          <div class="box-header">
              <h6>Message Subject Is Placed Here</h6>
              <p>From: help@example.com15 <span class="pull-right">Feb. 2016 11:03 PM</span></p>
          </div>
          <div class="box-body">
            <div class="box-item" style="text-align: center">
              <el-button-group>
                <el-button icon="fa fa-trash-o" title="Delete"></el-button>
                <el-button icon="fa fa-reply" title="Replay"></el-button>
                <el-button icon="fa fa-share" title="Forward"></el-button>
              </el-button-group>
            </div>
            <article class="mail-content">
              <h6>少年闰土</h6>
              <p>
                深蓝的天空中挂着一轮金黄的圆月，下面是海边的沙地，都种着一望无际的碧绿的西瓜。其间有一个十一二岁的少年，
                项带银圈，手捏一柄钢叉，向一匹猹尽力的刺去。那猹却将身一扭，反从他的胯下逃走了。
              </p>
              <p>
                这少年便是闰土。我认识他时，也不过十多岁，离现在将有三十年了；那时我的父亲还在世，家景也好，我正是一个少爷。
                那一年，我家是一件大祭祀的值年。这祭祀，说是三十多年才能轮到一回，所以很郑重。正（zhēng）月里供像，供品很多，祭器很讲究，
                拜的人也很多，祭器也很要防偷去。我家只有一个忙月（我们这里给人做工的分三种：整年给一定人家做工的叫长工；
                按日给人做工的叫短工；自己也种地，只在过年过节以及收租时候来给一定的人家做工的称忙月），忙不过来，他便对父亲说，
                可以叫他的儿子闰土来管祭器的。
              </p>
            </article>
          </div>
          <div class="box-footer">
            <div class="pull-left">
              <el-button icon="fa fa-trash-o">Delete</el-button>
            </div>
            <div class="pull-right">
              <el-button icon="fa fa-reply">Replay</el-button>
              <el-button icon="fa fa-share" type="primary">Forward</el-button>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
    name: "read",
    data() {
        return {}
    }
}
</script>

<style scoped>
.mail-content h6, h5, h4, h3, h2, h1, p{
    margin: 0 0 6px;
}
</style>
